<!-- 我的投标 -->

<template>
    <div class="my-bid-page">
        <el-table
          class="el-table"
          :header-cell-style="tableHeaderColor"
          :data="tableData"
          :default-sort="{ prop: 'date', order: 'descending' }" 
          :cell-style="cellStyle"
          @row-click="rowClick"
        >
            <el-table-column 
              type="index" 
              label="序号" 
              width="60" 
              align="center"
            >
                <template #default="scope">
                    <span>{{ (scope.$index + 1).toString().padStart(2, '0') }}</span>
                </template> 
            </el-table-column>
            <el-table-column prop="name" label="标的发布名称" />
            <el-table-column prop="time" label="投标结束时间" width="130" align="center" />
            <el-table-column prop="state" label="状态" width="90" align="center" />
            <el-table-column label="操作" width="100" align="center">
                <template #default="scope">
                    <el-button 
                      :class="[scope.row.stateCode == 5 ? 'el-button-disable' : 'el-button']" 
                      @click="handleOperationBtn(scope.row)" 
                      text
                    >{{scope.row.btnTitle}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import router from '@/router/router'

export default {
    setup() {
        const data = reactive({
            tableData: [
                {
                    name: '四川省交通建设集国有限责任公司智能化料场招标采购的公示',
                    time: '2022-04-13',
                    state: '报名成功',
                    stateCode: 0,
                    btnTitle: '提交资料',
                },
                {
                    name: '校工会交互智能平板采购竞价成交公吉',
                    time: '2022-04-13',
                    state: '报名成功',
                    stateCode: 0,
                    btnTitle: '提交资料'
                },
                {
                    name: '平邑县图书馆馆藏图书及智能化设备采购项目中标结果公示',
                    time: '2022-04-13',
                    state: '报名成功',
                    stateCode: 0,
                    btnTitle: '提交资料'
                },
                {
                    name: '三一智能电机-局部放电设备-招标招标公告-ZB202304130003\n\n项目标名',
                    time: '2022-04-13',
                    state: '报名成功',
                    stateCode: 0,
                    btnTitle: '提交资料'
                },
                {
                    name: '中电鸿信信息科技有限公司2023年警务室智能化改造项目单一来源采购方案公示',
                    time: '2022-04-13',
                    state: '待开标',
                    stateCode: 1,
                    btnTitle: '查看'
                },
                {
                    name: '海头镇主基村十地发向项目',
                    time: '2022-04-13',
                    state: '待开标',
                    stateCode: 1,
                    btnTitle: '查看'
                },
                {
                    name: '先锋创业大楼（515-1室） 60m²',
                    time: '2022-04-13',
                    state: '待开标',
                    stateCode: 1,
                    btnTitle: '查看'
                },
                {
                    name: '万达开绿色智能铸造产业园项目（二期）比选结果公告',
                    time: '2022-04-13',
                    state: '资质审核',
                    stateCode: 2,
                    btnTitle: '查看'
                },
                {
                    name: '2023年度工伤基金结算支付智能宙核监控项目竞争性磋商公告',
                    time: '2022-04-13',
                    state: '待开标',
                    stateCode: 3,
                    btnTitle: '等待报名'
                },
                {
                    name: '万达开绿色智能铸造产业园项目（二期）比洗结果公告',
                    time: '2022-04-13',
                    state: '开标结果',
                    stateCode: 4,
                    btnTitle: '查看'
                },
                {
                    name: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
                    time: '2022-04-13',
                    state: '已过期',
                    stateCode: 5,
                    btnTitle: '- -'
                },
                {
                    name: '侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金',
                    time: '2022-04-13',
                    state: '已过期',
                    stateCode: 5,
                    btnTitle: '- -'
                },
                {
                    name: '太原市迎泽区卫生局卫生监香所2023年4月至12月政府采购意向-公用经费项目',
                    time: '2022-04-13',
                    state: '已过期',
                    stateCode: 5,
                    btnTitle: '- -'
                },
                {
                    name: '侯马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金',
                    time: '2022-04-13',
                    state: '已过期',
                    stateCode: 5,
                    btnTitle: '- -'
                },
                {
                    name: '【次氣酸钠贮存罐修理】采购公告 附件',
                    time: '2022-04-13',
                    state: '已过期',
                    stateCode: 5,
                    btnTitle: '- -'
                }
            ]
        })
        // 修改表头属性
        function tableHeaderColor() {
            return {
                background: '#F7FDFD',
                color: '#333'
            }
        }
        // 调整列表样式
        function cellStyle(info) {
            if (info.columnIndex == 3 && info.row.stateCode == 0) {
                return {
                    color: '#F25300',
                    padding: '5px 0'
                }
            } else if (info.columnIndex == 3 && info.row.stateCode == 1) {
                return {
                    color: '#4B80F8',
                    padding: '5px 0'
                }
            } else if (info.columnIndex == 3 && info.row.stateCode == 2) {
                return {
                    color: '#4B80F8',
                    padding: '5px 0'
                }
            } else if (info.columnIndex == 3 && info.row.stateCode == 3) {
                return {
                    color: '#333',
                    padding: '5px 0'
                }
            } else if (info.columnIndex == 3 && info.row.stateCode == 4) {
                return {
                    color: '#16B6A0',
                    padding: '5px 0'
                }
            } else if (info.columnIndex == 3 && info.row.stateCode == 5) {
                return {
                    color: '#333',
                    padding: '5px 0'
                }
            } else {
                return {
                    padding: '5px 0'
                }
            }
        }
        // 点击某一行
        function rowClick(row,column,event) {
            console.log(row,column,event)
            
        }
        // 点击操作按钮
        function handleOperationBtn(item) {
            console.log(item);
            if (item.stateCode === 0) { // 提交资料
                router.push({
                    name: 'DataSubmit'
                })
            }
        }
        return {
            ...toRefs(data),
            tableHeaderColor,
            cellStyle,
            rowClick,
            handleOperationBtn
        }
    }
}
</script>

<style scoped>
.my-bid-page {
    height: calc(100% - 60px) ;
    margin-bottom: 20px;
    border-radius: 10px;
}
.el-table {
    margin: 20px;
    width: calc(100% - 40px);
}
.el-button {
    color: #16B6A0;
}
.el-button-disable {
    color: #333;
}
</style>